<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('充电枪列表')"/>
</head>
<body class="pear-container">
<div class="layui-card">
  <div class="layui-card-body">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">充电枪编号</label>
        <div class="layui-input-inline">
          <input type="text" name="gunNo" placeholder="" class="layui-input">
        </div>
        <label class="layui-form-label">充电枪名称</label>
        <div class="layui-input-inline">
          <input type="text" name="name" placeholder="" class="layui-input">
        </div>
        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="chargeGun-query">
          <i class="layui-icon layui-icon-search"></i>
          查询
        </button>
        <button type="reset" class="pear-btn pear-btn-md">
          <i class="layui-icon layui-icon-refresh"></i>
          重置
        </button>
      </div>
    </form>
  </div>
</div>
<div class="layui-card">
  <div class="layui-card-body">
    <table id="chargeGun-table" lay-filter="chargeGun-table"></table>
  </div>
</div>
</body>

<script type="text/html" id="chargeGun-toolbar">
  <button sa:hasPermission="gen:chargeGun:add" class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
    <i class="layui-icon layui-icon-add-1"></i>
    新增
  </button>
  <button sa:hasPermission="gen:chargeGun:remove" class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
    <i class="layui-icon layui-icon-delete"></i>
    删除
  </button>
</script>

<script type="text/html" id="chargeGun-bar">
  <button sa:hasPermission="gen:chargeGun:edit" class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit" title="修改"><i class="layui-icon layui-icon-edit"></i>
  </button>

  <button sa:hasPermission="gen:chargeGun:remove" class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" title="删除"><i class="layui-icon layui-icon-delete"></i>
  </button>
</script>




<script type="text/javascript" th:inline="javascript">

  window.selectDictLabel=function(datas, value) {
    var actions = [];
    $.each(datas, function(index, dict) {
      if (dict.dictValue == ('' + value)) {
        var listClass = ("default"== dict.listClass) ? "" : "badge badge-" + dict.listClass;
        actions.push(sprintf("<span class='%s'>%s</span>", listClass, dict.dictLabel));
        return false;
      }
    });
    return actions.join('');
  }
  window.sprintf=function (str) {
    var args = arguments, flag = true, i = 1;
    str = str.replace(/%s/g, function () {
      var arg = args[i++];
      if (typeof arg === 'undefined') {
        flag = false;
        return '';
      }
      return arg;
    });
    return flag ? str : '';
  }
</script>



<th:block th:include="include :: footer"/>
<script>
  layui.use(['table', 'form', 'jquery'], function () {
    let table = layui.table;
    let form = layui.form;
    let $ = layui.jquery;

    let MODULE_PATH = rootPath+"/ChargeGunController/";
    let cols = [
      [
        {type: 'checkbox'},

        {title: '主键id', field: 'id', align: 'center'},

        {title: '充电桩id', field: 'chargerId', align: 'center'},

        {title: '充电枪名称', field: 'name', align: 'center'},

        {title: '充电枪编号', field: 'gunNo', align: 'center'},

        {title: '电量', field: 'voltage', align: 'center'},

        {title: '电流', field: 'electricity', align: 'center'},

        {title: '功率', field: 'power', align: 'center'},

        {title: '状态', field: 'status', align: 'center',templet:function (ob) {
            if(ob.status == 0){
              return '空闲';
            }else if(ob.status == 1){
              return '离线';
            }else if(ob.status == 2){
              return '检修中';
            }else if(ob.status == 2){
              return '充电中';
            }else{
              return '占用';
            }
          }},

        {title: '描述', field: 'description', align: 'center'},

        {title: '操作', toolbar: '#chargeGun-bar', align: 'center'}
      ]
    ]

    //table表单列表
    table.render({
      elem: '#chargeGun-table',
      url: MODULE_PATH + 'list',
      page: true,
      method: 'get',
      cols: cols,
      skin: 'line',
      toolbar: '#chargeGun-toolbar',
      defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
      }, 'filter', 'print', 'exports']
    });

    //table图标事件绑定
    table.on('tool(chargeGun-table)', function (obj) {
      if (obj.event === 'remove') {
        window.remove(obj);
      } else if (obj.event === 'edit') {
        window.edit(obj);
      }
    });

    //table工具栏绑定
    table.on('toolbar(chargeGun-table)', function (obj) {
      if (obj.event === 'add') {
        window.add();
      } else if (obj.event === 'refresh') {
        window.refresh();
      } else if (obj.event === 'batchRemove') {
        window.batchRemove(obj);
      }
    });

    //查询按钮绑定
    form.on('submit(chargeGun-query)', function (data) {
      table.reload('chargeGun-table', {page: {curr: 1}, where: data.field})
      return false;
    });


    //添加
    window.add = function () {
      layer.open({
        type: 2,
        title: '新增',
        shade: 0.1,
        area: ['500px', '500px'],
        content: MODULE_PATH + 'add'
      });
    }
    //修改
    window.edit = function (obj) {
      layer.open({
        type: 2,
        title: '修改',
        shade: 0.1,
        area: ['500px', '500px'],
        content: MODULE_PATH + 'edit/' + obj.data['id']
      });
    }
    //删除
    window.remove = function (obj) {
      layer.confirm('确定要删除该数据', {icon: 3, title: '提示'}, function (index) {
        layer.close(index);
        let loading = layer.load();
        $.ajax({
          url: MODULE_PATH + "remove?ids=" + obj.data['id'],
          dataType: 'json',
          type: 'delete',
          success: function (result) {
            layer.close(loading);
            if (result.code==200) {
              layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                obj.del();
              });
            } else {
              layer.msg(result.msg, {icon: 2, time: 1000});
            }
          }
        })
      });
    }

    //批量删除
    window.batchRemove = function (obj) {
      let data = table.checkStatus(obj.config.id).data;
      if (data.length === 0) {
        layer.msg("未选中数据", {icon: 3, time: 1000});
        return false;
      }
      let ids = "";
      for (let i = 0; i < data.length; i++) {
        ids += data[i].id + ",";
      }
      ids = ids.substr(0, ids.length - 1);
      layer.confirm('确定要删除这些数据', {icon: 3, title: '提示'}, function (index) {
        layer.close(index);
        let loading = layer.load();
        $.ajax({
          url: MODULE_PATH + "remove?ids=" + ids,
          dataType: 'json',
          type: 'delete',
          success: function (result) {
            layer.close(loading);
            if (result.code==200) {
              layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                table.reload('chargeGun-table');
              });
            } else {
              layer.msg(result.msg, {icon: 2, time: 1000});
            }
          }
        })
      });
    }


    //刷新按钮
    window.refresh = function () {
      table.reload('chargeGun-table');
    }
  })
</script>
</html>